<template>
  <div id="app">
    <keep-alive include="Home">
      <router-view class="pd50" v-if="isRouteAlive"/>
    </keep-alive>
    <parking v-if="parkingTabShow" class="tabs"></parking>
    <tabs v-else class="tabs"></tabs>
  </div>
</template>
<script>

import ParkingTab from '@/views/ParkingTab'
import Tabs from '@/views/Tabs'

export default {
  name: 'App',
  components: {
    'parking' : ParkingTab,
    'tabs' : Tabs
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouteAlive: true,
      parkingTabShow: false
    }
  },
  watch:{
    $route: 'handleRoute'
  },
  mounted() {
    window.addEventListener(  'hashchange',() => {
        var currentPath = window.location.hash.slice(1) // 获取输入的路由
        console.log("currentPath",currentPath)
        if (this.$router.path !== currentPath) {
          this.$router.push(currentPath) // 动态跳转
        }
      },
      false
    )
  },
  methods: {
    handleRoute(route){
      var currentPath = route.fullPath
      console.log(currentPath)
      var parkingRoute = ['/parking_pay', '/binding', '/parking_record', '/parking_space', '/parking_register', '/pay_success']
      if(parkingRoute.indexOf(currentPath) != -1 || currentPath.indexOf('/pay_success') != -1 ){
        this.parkingTabShow = true
      }else{
        this.parkingTabShow = false
      }
    },
    reload() {
      this.isRouteAlive = false
      this.$nextTick(() => {
        this.isRouteAlive = true
      })
    }
  }
}
</script>
<style lang="less">
@import './assets/less/base';

html,
body,
#app {
  width: 100%;
  height: 100%;
  background-color: @main-body-color;
}

#app {
  .pd50 {
    padding-bottom: 50px;
  }
  .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    z-index: 999;
  }
}
</style>
